<template>
  <div class="all">

<headd master="反馈意见" address="home/mine"></headd>
    <img src="../../assets/call.png" class="image"></img>
    <div class="secend">
      <div class="secend1">
        <img src="../../assets/hot.png" class="hot"></img>
      </div>
      <div class="secend2">
        <label class="title">热门问题</label>
      </div>
      <div class="secend3"></div>
    </div>
      <div
        v-for="(item, index) in array"
        class="block"
        :class="item.name == select ? 'ok' : ''"
        @click="change(item.name)"
      >
        <label class="name">{{ item.content }}</label>
      </div>
    <el-button type="primary" round
      @click="assign" class="button"
    >提交反馈</el-button>
  </div>
</template>

<script>
import headd from "../../components/pageHeader2/index.vue";
export default {
  data() {
    return {
      select: "1",
      array: [
        {
          name: "1",
          content: "界面仍需美化",
        },
        {
          name: "2",
          content: "聊天界面不够顺畅",
        },
        {
          name: "3",
          content: "软件占据内存过多,需减少体积",
        },
        {
          name: "4",
          content: "缺少搜索好友功能",
        },
        {
          name: "5",
          content: "缺少客服答疑功能",
        },
        {
          name: "6",
          content: "遇到故障",
        },
      ],
    };
  },
  methods: {
    assign() {
 this.$message({
          message: '反馈成功!',
          type: 'success'
        });
    },
    change(e) {
      // console.log(this.array);
      // console.log(e);
      this.select = e;
    },
  },
  components:{
    headd
  }
};
</script>

<style scoped>
.name {
  font-weight: 900px;
  font-size: 14px;
}

.ok {
  animation-name: name;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

.button {
  position: absolute;
  bottom: 10px;
  width: 80%;
  left: 10%;
}
@keyframes name {
  from {
  }

  to {
    background-color: #d1d1d1;
  }
}

.block {
  height: 8vh;
  width: 90vw;
  border-bottom-color: #bababa;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  position: relative;
  left: 5%;
  display: flex;
  align-items: center;
}

.secend1 {
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.secend2 {
  width: 60%;
  height: 100%;
  display: flex;
  align-items: center;
  /* 		justify-content: center; */
}

.secend3 {
  width: 30%;
  height: 100%;
}

.secend {
  height: 10%;
  display: flex;
}

* {
  margin: 0px;
  padding: 0px;
}

.all {
  height: 100%;
  width: 100%;
}

.hot {
  height: 3vh;
  width: 3vh;
}

.image {
  height: 20%;
  width: 100vw;
}

.title {
  font-size: 16px;
  font-weight: 600;
}
</style>
